<template>
  <div class="CContainer">
    <div class="nav-top">
      <nav-bar left-text="" left-arrow @click-left="onClickLeft">
        <template #title>
          <cell is-link @click="showPopup">
            <span>{{NavCategory.name}}</span>&nbsp;&nbsp;
            <i
              style="font-size: 1.25rem"
              :class="rotate % 2 == 0 ? 'fa fa-angle-up' : 'fa fa-angle-down'"
            ></i>
          </cell>
        </template>
        <template #right>
          <router-link :to="{ name: 'Home-input' }">
            <icon
              name="search"
              size="18"
              class="icon-search"
              @click-right="onClickRight"
            />
          </router-link>
        </template>
      </nav-bar>
    </div>
    <!-- 弹出层 -->

    <popup
      round
      @click-overlay="clickHandle"
      v-model:show="show"
      style="
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 95px;
        width: 50vw;
        height: 15vh;
        box-sizing: border-box;
      "
    >
      <div class="rotate-main">
        <grid :column-num="3" :border="false">
  <grid-item v-for="item in course" :text="item.title" :to="{ name: item.link, query: { id: item.id } }"/>
</grid>
      </div>
    </popup>

    <!-- 导航条 -->
    <div class="listMove">
      <tabs v-model:active="active" swipeable type="card">
        <tab :title="'全部 '">
          <div class="content">
            <!-- 图1 -->
            <div class="con" @click="MoveLessonTo(Combo.id)">
              <img :src="dalImg(Combo.picture)" alt="视频" />
              <div class="con1">
                <h5>{{ Combo.name }}</h5>
                <span
                  ><i class="fa fa-copyright" aria-hidden="true"></i>{{ Combo.price }}</span
                >
              </div>
              <div class="con2">
                <div class="con2-1">
                  <span>课程：3个</span><span>视频：21集</span
                  ><span>习题：87道</span>
                </div>
                <div class="con2-2">
                  <span
                    ><i class="fa fa-copyright" aria-hidden="true" style="text-decoration: line-through"></i>{{ Combo.price }}</span
                  >
                </div>
              </div>
            </div>
            <!-- 列表 -->
            <div class="list" v-for="i in Course">
              <card
              class="card"
                  :price="i.coursePrice"
                  :title="i.courseName"
                  :thumb="dalImg(i.picture)"
                  @click="VDetail(i)"
              >
              <template #num> 210903人购买 </template>
                </card>
              <div class="list-bottom">
                <div class="bot-left" style="display: flex;width: 35vw;justify-content: space-between;">
                  <span>视频：4集</span><span>习题：66题</span>
                </div>
                <div class="bot-righ" @click="current(i.id)">
                  <i
                    style="color: orange; margin-right: 0.3rem"
                    class="fa fa-plus-square"
                  ></i
                  ><span style="color: orange">添加购物车</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
<!-- 其他选项 -->
        <tab v-for="item in Category" :title="item.name" :key="item.id" :name="item.id" @change="changeHandle">
          <div class="content">
            <div class="list" v-for="i in Course">
                <card
                  class="card"
                  :price="i.comboPrice"
                  :title="i.courseName"
                  :thumb="dalImg(i.picture)"
                  @click="VDetail(i)"
                />
              <div class="list-bottom">
                <div class="bot-left" style="display: flex;width: 35vw;justify-content: space-between;">
                  <span>视频：4集</span><span>习题：66题</span>
                </div>
                <div class="bot-righ" @click="current">
                  <i
                    style="color: orange; margin-right: 0.3rem"
                    class="fa fa-plus-square"
                  ></i
                  ><span style="color: orange">添加购物车</span>
                </div>
              </div>
            </div>
          </div>
        </tab>
      </tabs>
    </div>

    <!-- 购物车 -->
    <action-bar class="Home-cart" @click="ToCart">
      <action-bar-icon icon="cart-o" class="Home-cart" />
    </action-bar>
  </div>
</template>

<script setup>
import {
  NavBar,
  Icon,
  Popup,
  Tab,
  Tabs,
  Card,
  ActionBar,
  ActionBarIcon,
  Grid, GridItem,
  Toast,
} from "vant";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import "font-awesome/css/font-awesome.min.css";
import { dalImg, isLoginEd } from "../utils/tools";
import { getUserAPI } from "../API/li";
//引入接口
import {
  CourseTotalAPI,
  ComboTreeAPI,
  CategoryAPI,
  NavCategoryAPI,
  addCartAPI,
  delCartAPI,
} from "../API/wang";
/* 箭头旋转 */
const route = useRoute();
const router = useRouter();

const Combo = ref([]);
const Course = ref([]);
const Category = ref ([]);
const NavCategory = ref([])



//
let names = ref("");
let pictures = ref("");
let coursePrices = ref("");
let videoTotals = ref("");
let textNumbers = ref("");
let courseIds = ref("");

// i.courseName,
// i.picture,
// i.coursePrice,
// i.videoTotal,
// 1,
// i.id

const loadData = async () => {
  /* 套餐列表 */
  const data = await ComboTreeAPI(route.query.id);
  Combo.value = data.data[route.query.id-1]
  console.log(Combo.value);
  /* 课程列表 */
  const Cdata = await CourseTotalAPI(route.query.id);
  Course.value = Cdata.data
  console.log(Course.value);
  /* 导航 */
  const nav = await CategoryAPI(route.query.id);
  Category.value = nav.data;
  console.log(Category.value);
    /* 弹出层导航 */
    const Nav = await NavCategoryAPI(route.query.id);
  NavCategory.value = Nav.data[route.query.id-1];
  console.log(NavCategory.value);
}
loadData()

/* 跳转详情页 */
const MoveLessonTo = (id) => {
  router.push({
    name:"Home-MoveLessonTo",
    query:{
      id,
    }
  })
}


/* 返回上一级 */
const onClickLeft = () => {
  router.push({
    name: "Home",
  });
};
/* 下拉菜单 */
const rotate = ref(1);
const show = ref(false);
const showPopup = () => {
  rotate.value++;
  if (rotate.value % 2 == 0) {
    show.value = true;
  }
};
let clickHandle = () => {
  rotate.value = 1;
};
/* 顶部弹出部分 */
let course = ref([
  { title: "初中数学", id: 1, link: "Home-MiddleMath" },
  { title: "经典语文", id: 2, link: "Home-Chinese" },
  { title: "趣味英语", id: 3, link: "Home-English" },
  { title: "初中物理", id: 4, link: "Home-Physics" },
  { title: "初中化学", id: 5, link: "Home-Chemistry" },
  { title: "高中数学", id: 6, link: "Home-HighMath" },
  { title: "小学数学", id: 7, link: "Home-Mathematics" },
  { title: "套餐", id: 8, link: "Home-Package" },
]);
let uids = ref("");
getUserAPI().then((res) => {
  uids.value = res.data.id;
  console.log(uids);
});
/* 添加、删除购物车   addCartAPI,delCartAPI */

console.log(names);
const current = () => {
  if (isLoginEd()) {
    // console.log(Course.value);
    addCartAPI(
      uids.value,
      names.value,
      pictures.value,
      coursePrices.value,
      videoTotals.value,
      textNumbers.value,
      courseIds.value,
    ).then((res) => {
      console.log(res);
      Toast.success("添加购物车成功")
    });
  } else {
    Toast("请登录");
    router.push({
      name: "Login",
    });
  }
};
/* 跳转购物车列表 */
const ToCart = () =>{
  router.push({
    name:"Home-Cart",
  })
}
/* 课程跳转详情 */
/*  const VDetail = (i) => {
  router.push({
    name: "Home-Training",
    query: {
      idTwo:i.id,
    },
  })} */
</script>
<style>
.CContainer .listMove .van-tab--card {
  color: #666;
}
.CContainer .listMove .van-tabs__nav--card {
  border: none;
}
.CContainer .listMove .van-tab--card.van-tab--active {
  background-color: cornflowerblue;
  color: aliceblue;
  font-size: 0.12rem;
  height: 1.3rem;
  margin: auto 0;
  border-radius: 0.3rem;
}
.CContainer {
  display: flex;
  flex-direction: column;
}
.CContainer .nav-top .icon-search {
  color: #333;
}
.CContainer .nav-top .Icon-search {
  transform: rotate(-180deg);
}
.CContainer li {
  width: 30%;
  line-height: 25px;
  text-align: center;
  border-radius: 17px;
}

.CContainer .van-tab--card {
  border: none;
}
.CContainer .rotate-main {
  width: 50vw;
  height: 15vh;
  margin: 0 auto;
  border-radius: 6px;
  font-size: 12px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.CContainer ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.CContainer li {
  width: 30%;
  line-height: 25px;
  text-align: center;
  border-radius: 17px;
  color: #666;
}
.CContainer .content {
  border-top: rgb(226, 221, 221) 1px solid;
  flex: 1;
  overflow: auto;
  height: 90vh;
}
.CContainer .con {
  width: 90vw;
  height: 30vh;
  box-sizing: border-box;
  margin: 1rem auto;
  box-shadow: 0px 0px 0.3125rem 0px rgba(0, 0, 0, 0.5);
  padding: .3rem;
  display: flex;
  flex-direction: column;
}
.CContainer .con img {
  height: 70%;
}
.CContainer .con1 {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.CContainer .con1 span {
  color: orange;
  font-weight: bolder;
}
.CContainer .con1 span i {
  margin-right: 0.2rem;
}
.CContainer .con2 {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  font-size: 0.12rem;
}
.CContainer .con2 .con2-1 span {
  margin-right: 0.6rem;
}
.CContainer .con2 .con2-2 {
  text-decoration: line-through;
}
.CContainer .list {
  background-color: rgb(249, 249, 249);
  width: 95vw;
  height: 19vh;
  margin: 1rem auto;
  font-size: 0.12rem;
}
.CContainer .card {
  height: 80%;
}
.list-bottom {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 1rem;
  border-top: rgb(226, 221, 221) 1px solid;
}
.CContainer .list-bottom .bot-right {
  color: orange;
  font-size: 13px;
}
.CContainer .list-bottom .bot-right .add {
  margin-right: 6px;
}
.CContainer .Home-cart {
  width: 3rem;
  height: 3rem;
  position: fixed;
  bottom: 2rem;
  left: 80vw;
  background-color: orange;
  z-index: 999;
  border-radius: 3rem;
  line-height: 3rem;
  color: aliceblue;
}
.CContainer .Home-cart .van-icon:before {
  color: aliceblue;
  font-size: 1.5rem;
}
.CContainer .Home-cart .van-badge {
  width: 1.2rem;
  height: 1.2rem;
  border: none;
  font-size: 0.8rem;
  line-height: 1.2rem;
  font-weight: normal;
}
.CContainer a {
  color: #333;
}
.CContainer .CContainer .van-popup--center.van-popup--round {
  border-radius: 0.3rem;
}
/* 弹出层样式 */
.CContainer .van-grid-item__content{
  padding: 0;
}
.CContainer .van-grid-item__text{
  line-height: 1.9rem;
}
/* 导航栏 */
.CContainer .van-tabs__wrap{
  background-color: #f1f1f1;
}
</style>
